<template>
  <div class="preview-box" v-if="isPreviewBox">
    <div class="video-recommendation">
      <div class="left">
        <img src="@/assets/images/zxjt/juxing.png" alt="">
        <span>直播预告</span>
      </div>
      <div class="right" v-if="liveBroadcastPreviewNum">
        <span>更多</span>
        <img src="@/assets/images/zxjt/gengduo.png" alt="">
      </div>
    </div>
    <div class="example-3d" v-if="isLoopLivePreview">
      <swiper ref="mySwiper" class="swiper" :options="swiperOption">
        <swiper-slide v-for="(v,index) in livePreviewList" :key='index'>
          <img class="img-cover swiper-lazy" :data-src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_209,w_369'" />
          <template v-if="v.roomStatus=='0'">
            <div class="preview-time">
             <p><span class="preview-yg yugao">预告</span><span class="preview-time-num">{{v.beginTime | filterTime}}</span>
              </p>
            </div>
            <div v-if="v.isZbRemind==0 && isZxyhApp" :class="'sw'+v.roomId" :data-roomId='v.roomId' :data-roomName='v.title' :data-roomStatus='v.roomStatus' :data-roomCreator='v.orgName' 
              :data-isZbRemind="v.isZbRemind" class="start-remind">开播提醒</div>
          </template>
          <template v-else>
          <!-- <template>
            <div class="live-time">
              <div class="gif-box">
                <img src="../../assets/images/zxyh/live-gif.gif" />
              </div>
              <span class="live-text">直播中</span>
              <div class="person-icon"></div>
              <span class="person-num">{{v.roomMember | filterNum(1)}}</span>
            </div> -->
            <div class="live-bg">
              <p><span class="preview-yg">直播中</span><span class="preview-time-num">{{v.beginTime | filterTime}}</span>
              </p>
            </div>
          </template>
          <div class="cover-img" :data-roomId="v.roomId" :data-roomName='v.title' :data-roomStatus='v.roomStatus' :data-roomCreator='v.orgName'></div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="live-preview-one-list" v-if="oneArrayLength" v-for="(v,index) in livePreviewList"
      @click="goToLive(v.roomId,v)" :key='index'>
      <img class="img-imag-url" :src="v.imagUrl" />
      <template v-if="v.roomStatus=='0'">
        <div class="preview-time">
          <p><span class="preview-yg yugao">预告</span><span class="preview-time-num">{{v.beginTime | filterTime}}</span></p>
        </div>
      </template>
      <template v-if="v.roomStatus=='1'">
        <!-- <div class="live-time">
          <div class="gif-box">
            <img src="../../assets/images/zxyh/live-gif.gif" />
          </div>
          <span class="live-text">直播中</span>
          <div class="person-icon"></div>
          <span class="person-num">{{v.roomMember | filterNum(1)}}</span>
        </div> -->
        <div class="live-bg">
          <p><span class="preview-yg">直播中</span><span class="preview-time-num">{{v.beginTime | filterTime}}</span>
          </p>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
  let vm = this;
  export default {
    filters: {
      filterNum: function(type, fixed) {
        if (typeof type == "undefined") {
          return 0
        } else if (type < 10000) {
          return type
        } else {
          return (type / 10000).toFixed(fixed) + "w";
        }
      },
      filterTime: function(type) {
        if (type) {
          return `${type.slice(5,7)}月${type.slice(8,10)}日  ${type.slice(11,13)}:${type.slice(14,16)}`
        }

      }
    },
    data() {
      return {
        liveBroadcastPreviewNum: false,
        isZxyhApp: false,
        isPreviewBox: false,
        livePreviewList: [],
        isLoopLivePreview: false,
        oneArrayLength: false,
        bannerArray: [],
        swiperOption: {
          effect: 'coverflow',
          slidesPerView: 'auto',
          loopedSlides: 12,
          centeredSlides: true,
          observer: true,
          observeParents: true,
          observeSlideChildren: true,
          loop: true,
          initialSlide: 0, //默认初始化时显示第一个slide
          spaceBetween: 40,
          coverflowEffect: {
            rotate: 0,
          },
          lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 4,
          },
          on: {
            click: (event) => {
              // let _this = this;
              //let swiper = _this.$refs.mySwiper.swiper;
              let roomId = event.target.getAttribute('data-roomId')
              let roomName = event.target.getAttribute('data-roomName')
              let roomStatus = event.target.getAttribute('data-roomStatus')
              let roomCreator = event.target.getAttribute('data-roomCreator')
              this.functionDot(roomId, roomName, roomStatus, roomCreator)//点击打点
              if (event.target.className.includes('start-remind')) {
                let roomId = event.target.getAttribute('data-roomId')
                this.liveStartTip(roomId)
                return
              }
              vm.goToLive(roomId)
            },
          },
        }

      }
    },
    watch: {},
    created() {
      vm = this;
    },
    //缓存 返回后再调用
    activated: function() {
      this.getRoomList()
    },
    mounted() {
      this.isZxyhApp = window.terminal.isZxyhApp

    },
    methods: {
      //获取直播间列表
      getRoomList() {
        this.$http.get(`/h5live/getRoomList?plat=${fun.getPlatform()}`).then(res => {
            if (res.data.code == "000000") {
              this.livePreviewList = [...res.data.data.startRoomList, ...res.data.data.forecastRoomList];
			        window.sessionStorage.setItem('zxjt_liveList',JSON.stringify(res.data.data.startRoomList))
              if (this.livePreviewList.length > 0) {
                if(this.livePreviewList.length <= 2){
                  this.liveBroadcastPreviewNum = false
                }
                if (this.livePreviewList.length == 1) {
                  this.isLoopLivePreview = false;
                  this.oneArrayLength = true;
                } else {
                  this.oneArrayLength = false;
                  this.isLoopLivePreview = true;
                }
                this.isPreviewBox = true;
              } else {
                this.isPreviewBox = false;
              }
            }
          })
          .catch(response => {
            console.log(response);
          });
      },
      liveStartTip(roomId) {
        if (this.$store.state.isYk) { //游客
          fun.ykDisposeFun();
        } else {
          this.postRemindData(roomId)
        }
      },
      goToLive(roomId, v) {
        if (v) {
          this.functionDot(roomId, v.title, v.roomStatus, v.orgName)
        }
        this.$router.push(`/${this.$channel}/liveRoom/${roomId}?dzhPage=true`);
      },
      //  开播提醒
      postRemindData(roomId) {
        let params = {
          'roomId': roomId,
          'isRemind': '1'
        }
        this.$http.post("/h5live/setZbRemind", this.$qs.stringify(params)).then(
          res => {
            let {
              code
            } = res.data
            if (code == "000000") {
              fun.toastMessage("预约成功", 3000)
              let swDom = document.getElementsByClassName('sw' + roomId)
              for (let i = 0; i < swDom.length; i++) {
                swDom[i].style.display = 'none'
              }
            } else {
              console.log('未知错误')
            }
          },
          err => {
            console.log(err);
          }
        );
      },
      //首页点击直播间埋点
      functionDot(roomId,roomName,roomStatus,roomCreator) {
        if (this.$channel !== 'zxjt') return
        $sensorsTrack('liveBroadcast_liveRoomClick',
          {
            page_name: '首页',
            module_name: '直播预告',
            user_nickname: localStorage.getItem("userNickName"),
            live_room_id: roomId,
            live_room_name: roomName,
            live_room_status: roomStatus == '1'?'直播中': roomStatus == '0'?'预告':'回看',
            live_room_creator: roomCreator
          }
        );
      }
    }
  }
</script>

<style scoped="scoped">
  .preview-box>>>.swiper-slide-shadow-left {
    background-image: none;
  }

  .preview-box>>>.swiper-slide-shadow-right {
    background-image: none;
  }

  .preview-box>>>.swiper-slide-prev {
    opacity: 0.6;
  }

  .preview-box>>>.swiper-slide-next {
    opacity: 0.6;
  }

  .person-num {
    font-size: 19px;
    font-family: PingFang;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 36px;
    display: inline-block;
  }

  .person-icon {
    width: 13px;
    height: 15px;
    background: url(../../assets/images/zxyh/small-person-icon.png) no-repeat;
    background-size: 13px 15px;
    margin: 0 10px 0 10px;
  }

  .live-text {
    font-size: 19px;
    font-weight: 500;
    color: #FFFFFF;
    margin-left: 5px;
    line-height: 36px;
    display: inline-block;
  }

  .gif-box {
    width: 47px;
    height: 36px;
    background: linear-gradient(0deg, #EC2639 0%, #FF6845 100%);
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .gif-box img {
    width: 21px;
    height: 19px;
  }

  .live-time {
    /*width: 188px;*/
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 18px;
    left: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 13px;
    border-radius: 18px;
  }

  .live-preview-one-list {
    width: 647px;
    height: 345px;
    margin-left: 50px;
    margin-top: 40px;
    position: relative;
  }

  .live-preview-one-list .img-imag-url {
    width: 647px;
    height: 345px;
    border-radius: 10px;
  }

  .cover-img {
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.17) 17%, rgba(255, 255, 255, 0) 100%);
    /*background: saddlebrown;*/
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .preview-box{
    margin-top: 69px;
  }

  .example-3d {
    width: 100%;
    margin-top: 30px;
  }

  .swiper-container {
    width: 750px;
    height: 256px;
  }

  .example-3d>>>.swiper-wrapper {
    width: 417px !important;
    height: 235px;
  }

  .example-3d>>>.swiper-slide {
    width: 417px !important;
    height: 235px;
    position: relative;
  }

  .example-3d>>>.img-cover {
    width: 417px !important;
    height: 235px;
    border-radius: 10px;
  }

  .preview-text {
    display: flex;
    align-items: center;
    margin: 16px 0 24px 32px;
    height: 36px;
    font-size: 35px;
    line-height: 36px;
    font-weight: 800;
    color: #34323F;
  }

  .preview-text::before {
    content: " ";
    height: 44px;
    width: 44px;
    margin-right: 0px;
    background: url('../../assets/images/zxyh/live_preview.png') no-repeat;
    background-size: 100% 100%;
  }

  .video-recommendation{
    margin: 50px 0 0 30px;
    padding-right: 30px;
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  .video-recommendation .left img{
    vertical-align: bottom;
    height: 18px;
  }
  .video-recommendation .left span{
    position: absolute;
    bottom: 9px;
    left: 0;
    font-size: 36px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .video-recommendation .right img{
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
  .video-crecommendation .right span{
    font-size: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 30px;
  }

  .live-preview-one-list .preview-time {
    min-width: 290px;
    height: 36px;
    background: url('../../assets/images/zxjt/yugaoBg.png') no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100% 100%;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .live-preview-one-list .preview-time p {
    width: 100%;
    color: white;
    line-height: 50px;
  }

  .live-preview-one-list .preview-yg {
    font-size: 20px;
    display: inline-block;
    transform: scale(0.8, 0.8);
    margin: 0 10px 0 10px;
  }

  .live-preview-one-list .preview-time-num {
    font-size: 20px;
    display: inline-block;
    transform: scale(0.8, 0.8);
  }
  .yugao{
    margin-left: 7px;
  }
  .preview-time {
    width: 238px;
    height: 36px;
    background: url('../../assets/images/zxjt/yugaoBg.png') no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 238px 36px;
    z-index: 10;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top-left-radius: 6px;
  }
  .live-bg{
    width: 260px;
    height: 36px;
    background: url('../../assets/images/zxjt/zhiboBg.png') no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 238px 36px;
    z-index: 10;
    border-top-left-radius: 10px;
  }
  .preview-time,.live-bg p {
    color: white;
    line-height: 36px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .preview-yg {
    font-size: 24px;
    display: inline-block;
    transform: scale(0.8, 0.8);
  }
  .preview-time .preview-yg {
    margin-left: 7px !important;
  }
  .preview-time-num {
    font-size: 22px;
    display: inline-block;
    transform: scale(0.8, 0.8);
    margin-left: 8px;
    font-weight: 600;
  }

  .start-remind {
    width: 159px;
    height: 44px;
    border: 1.5px solid #ffffff;
    position: absolute;
    bottom: 22px;
    right: 29px;
    z-index: 10;
    border-radius: 10px;
    line-height: 44px;
    text-align: center;
    color: #ffffff;
    font-size: 24px;
    font-weight: blod;
  }
</style>
